<template>
  <div class="header" >
    <el-card class="box-card">
      <el-form
        :model="ruleForm"
        status-icon
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="一级分类" prop="pass">
          <el-select
            v-model="ruleForm.oneValue"
            @change="category1Change"
            filterable
            placeholder="请选择"
          >
            <el-option
              v-for="item in category1"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级分类" prop="pass">
          <el-select
            v-model="ruleForm.twoValue"
            filterable
            @change="category2Change"
            placeholder="请选择"
          >
            <el-option
              v-for="item in category2"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="三级分类" prop="pass">
          <el-select
            v-model="ruleForm.thirdValue"
            filterable
            @change="category3Change"
            placeholder="请选择"
          >
            <el-option
              v-for="item in category3"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
    props:['category1','category2','category3'],
  data() {
    return {
      ruleForm: {
        oneValue: "",
        twoValue: "",
        thirdValue: "",
      },
    };
  },
  methods: {
      category1Change(){//时间监听更方便点，监视data的变化麻烦
          this.$emit('category2List',this.ruleForm.oneValue);
      },
      category2Change(){
          this.$emit('category3List',this.ruleForm.twoValue);
      },
      category3Change(){
          this.$emit('getTableData',this.ruleForm.thirdValue);
      },
  },
};
</script>

<style scoped lang="css">
.box-card {
  width: 100%;
}
</style>